<template>
  <el-dialog
      top="10vh"
      width="600px"
      title="处理自定义旅游订单"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <SubmitForm
        :rule-form="ruleForm"
        :rules="rules"
        :form-list="formList"
        @change="handleFormChange"
        @save="onSave"
        @close="dialogValue = false"
    />

  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'TravelCustomFormAdd',
  data() {
    return {
      apiKey: 'travelCustom',
      dialogValue: false,
      ruleForm: {},
      defaultForm: {
        status: 0,
        handler: '',
        handler_remark: '',
        plan_file_path: ''
      },
      rules: {
        status: [{required: true, message: '请选择状态'}],
        handler: [{required: true, message: '请输入处理人'}],
        handler_remark: [{required: true, message: '请输入处理备注'}],
      },
      formList: [
        {
          label: '状态',
          prop: 'status',
          name: 'select',
          colSpan: 24,
          placeholder: '请选择状态',
          options: [
            {
              value: 0,
              label: '待处理'
            },
            {
              value: 1,
              label: '处理中'
            },
            {
              value: 2,
              label: '已完成'
            },
            {
              value: 3,
              label: '已取消'
            }
          ]
        },
        {
          label: '处理人',
          prop: 'handler',
          name: 'input',
          colSpan: 24,
          placeholder: '请输入处理人姓名'
        },
        {
          label: '处理备注',
          prop: 'handler_remark',
          name: 'input',
          colSpan: 24,
          type: 'textarea',
          rows: 4,
          placeholder: '请输入处理备注信息'
        },
        {
          label: '方案文件',
          prop: 'plan_file_path',
          name: 'file',
          colSpan: 24,
          multiple: true
        }
      ]
    }
  },
  methods: {
    handleFormChange({key, val}) {
      // 处理表单字段变化
      console.log('表单字段变化:', key, val)
    },
    open(row) {
      this.dialogValue = true
      if (row) {
        // 编辑模式，获取现有数据
        http[this.apiKey].read(row.id).then(res => {
          this.ruleForm = {
            ...res.data,
            status: 2,
          }
          if (!this.ruleForm.handler) {
            this.ruleForm.handler = this.$store.getters.userInfo.nickname
          }
        })
      } else {
        // 新增模式，使用默认值
        this.ruleForm = {
          ...this.defaultForm,
          status: 2
        }
        if (!this.ruleForm.handler) {
            this.ruleForm.handler = this.$store.getters.userInfo.nickname
          }
      }
    },
    onSave() {
      // 保存数据
      const method = this.ruleForm.id ? 'update' : 'create'
      const id = this.ruleForm.id || null
      
      http[this.apiKey][method](id, {
        ...this.ruleForm,
      }).then(res => {
        this.$message.success('操作成功')
        this.dialogValue = false
        this.$emit('get-page')
      }).catch(err => {
        this.$message.error('操作失败：' + (err.message || '未知错误'))
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>
